<template>
  <el-card class="box-card" shadow="hover" v-loading="loading">
    <h2>登录</h2>
    <el-form :model="formDatas" class="login" :rules="rules" ref="ruleFormLogin">
      <el-form-item label="" prop="userEmail">
        <el-input type="email" v-model="formDatas.userEmail" placeholder="邮箱号" autoComplete="off"></el-input>
      </el-form-item>
      <el-form-item label="" prop="password">
        <el-input type="password" v-model="formDatas.password" show-password placeholder="密码" autoComplete="off"></el-input>
      </el-form-item>
      <el-form-item label="" prop="verification">
        <div class="vers">
          <el-input v-model="formDatas.verification" placeholder="验证码"></el-input>
          <!-- <img :src="verify" alt=""> -->
          <div class="verify-box" @click="getVerify()" v-html="verify"></div>
        </div>
      </el-form-item>
      <div class="btns">
        <el-button type="primary" @click="onSubmit('ruleFormLogin')">登录</el-button>
        <el-button type="success" @click="uploadIndex(1)">注册</el-button>
        <el-button type="info" @click="uploadIndex(2)">忘记密码</el-button>
        <el-button type="danger" @click="onSubmit('ruleFormLogin', true)">游客登录</el-button>
      </div>
    </el-form>
  </el-card>
</template>

<script>
import { POST_LOGIN_TOKEN, POST_VERIFY } from "@/axios/api";

let loadingTime;
let formDatas = {
  userEmail: "",
  password: "",
  verification: "",
  sessionKey: "",
};

export default {
  name: "dwpLogin",
  props: {
    index: {
      type: Number,
    },
  },
  components: {},
  data() {
    return {
      formDatas: JSON.parse(JSON.stringify(formDatas)),
      rules: {
        userEmail: [
          { required: true, message: "请输入邮箱号", trigger: "blur" },
          {
            min: 3,
            max: 25,
            message: "长度在 3 到 25 个字符",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 6,
            max: 25,
            message: "长度在 6 到 25 个字符",
            trigger: "blur",
          },
        ],
        verification: [
          {
            required: true,
            message: "请输入验证码 游客也不例外哦",
            trigger: "blur",
          },
          {
            min: 1,
            max: 6,
            message: "请输入6位数的验证码",
            trigger: "blur",
          },
        ],
      },
      loading: false,
      verify: "",
    };
  },
  mounted() {
    this.getVerify();
  },
  computed: {},
  watch: {
    loading(val) {
      if (val) {
        clearTimeout(loadingTime);
        loadingTime = setTimeout(() => {
          this.loading = false;
        }, 5000);
      } else {
        clearTimeout(loadingTime);
      }
    },
  },
  methods: {
    onSubmit(refName, type) {
      if (
        !/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(
          this.formDatas.userEmail
        )
      )
        return this.$message.warning("邮箱号不符合要求！");
      if (type) {
        this.formDatas.userEmail = "dwp@wc.com";
        this.formDatas.password = "123456";
      }
      this.$refs[refName].validate((valid) => {
        if (valid) {
          this.postlogin(type);
          this.getVerify();
        } else {
          this.$message.warning("请填写完整信息");
          return false;
        }
      });
    },
    async postlogin() {
      this.loading = true;
      const { data, code, message } = await this.$http.post(
        POST_LOGIN_TOKEN,
        this.formDatas
      );
      this.loading = false;
      if (code !== 200) return this.$message.warning(message);
      localStorage.setItem("vipToken", data);
      this.$message.success("登录成功");
      this.$router.push("/welcome")
    },
    async getVerify() {
      const { data, code, message } = await this.$http.post(POST_VERIFY);
      if (code !== 200) return this.$message.warning(message);
      this.verify = data.data;
      this.formDatas.sessionKey = data.sessionKey;
    },

    uploadIndex(index) {
      this.$emit("update:index", index);
    },
  },
};
</script>
<style lang='less' scoped>
.box-card {
  padding-top: 1px;
  width: 400px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  .vers {
    display: flex;
    justify-content: space-between;
    .verify-box {
      margin: 0 5px;
      width: 100px;
      height: 40px;
    }
  }
}

h2 {
  margin-top: 0;
  text-align: center;
}
.btns {
  padding-top: 10px;
  display: flex;
  justify-content: center;
}
</style>